	<div class="wrap">

		<div id="icon-themes" class="icon32"></div>

		<h2>Kodax - Slider</h2>

		<?php 
			//delete_option('canon_options_slider');
			$canon_options_slider = get_option('canon_options_slider'); 

			//get posts
			$query_args = array();
			$query_args = array_merge($query_args, array(
					'numberposts' 		=> -1,
					'orderby' 			=> 'post_date',
					'order'				=> 'DESC',
					'post_type'    		=> 'post',
					'post_status'     	=> 'publish',
					'suppress_filters' 	=> true
			));
			$results_query = get_posts($query_args);

		?>

		<br>
		
		<form method="post" action="options.php" enctype="multipart/form-data">
			<?php settings_fields('group_canon_options_slider'); ?>				<!-- very important to add these two functions as they mediate what wordpress generates automatically from the functions.php -->
			<?php do_settings_sections('handle_canon_options_slider'); ?>		


			<?php //submit_button(); ?>


			<div id="slider_wrap">

				<!-- SLIDER CONTROL -->
				<div id="slider_control">
					<button id="slider_control_add_image_slide" name="slider_control_add_image_slide" class="button-secondary add_slide_button" value="image_slide"><?php _e("Add image slide", "loc_canon"); ?></button>
					<button id="slider_control_add_post_slide" name="slider_control_add_post_slide" class="button-secondary add_slide_button" value="post_slide"><?php _e("Add post slide", "loc_canon"); ?></button>
					<br><br>
					<button id="slider_control_add_image_slide" name="slider_control_expand_all" class="button-secondary expand_all_button" value="expand"><?php _e("Expand all slides", "loc_canon"); ?></button>
					<button id="slider_control_add_post_slide" name="slider_control_collapse_all" class="button-secondary collapse_all_button" value="collapse"><?php _e("Collapse all slides", "loc_canon"); ?></button>
					<br><br>
					<button id="slider_control_delete_slide" name="slider_control_delete_slide" class="button-secondary del_slide_button" value="post_slide"><?php _e("Delete slide", "loc_canon"); ?></button>
					<br><br>
					<button id="action" name="canon_options_slider[action]" class="button-primary" value="save"><?php _e("Save changes", "loc_canon"); ?></button>
				</div>

				<!-- 
				SLIDER MAIN AREA 
				NB: all inputs must have class slide_option
				-->
				<div id="slider_main">
					<ul id="slides">

						<?php 

							$num_slides = (isset($canon_options_slider['slides'])) ? count($canon_options_slider['slides']) : 0;

							for ($i = 0; $i < $num_slides; $i++) {  

								if ($canon_options_slider['slides'][$i]['type'] == 'image_slide') {
								?>
									
								<!-- IMAGE SLIDE TYPE -->
									<li class="image_slide slide">
										<div class="slide_head">
											<h3><?php _e("Image slide", "loc_canon"); ?>: <i><?php if (!empty($canon_options_slider['slides'][$i]['title'])){echo $canon_options_slider['slides'][$i]['title'];} else {echo "Untitled";} ?></i></h2>
										</div>

										<div class="slide_content clearfix">

											<div class="slide_thumb">
												<?php 
													if(!empty($canon_options_slider['slides'][$i]['image_url'])) {
														printf("<img width='200' src='%s'>", esc_url($canon_options_slider['slides'][$i]['image_url']));															
													} else {
														printf("<img width='200' src='%s'>", esc_url(get_template_directory_uri() . "/img/default_slide_img.png"));	
													}

												?>
											</div>

											<div class="slide_options">
												<label><?php _e("Slide title", "loc_canon"); ?></label><br/>
												<input class='slide_option widefat' type='text' id='slide_title' name='canon_options_slider[slides][<?php echo $i; ?>][title]' value="<?php if (isset($canon_options_slider['slides'][$i]['title'])) echo htmlspecialchars($canon_options_slider['slides'][$i]['title']); ?>">

												<br><br>
												<label><?php _e("Image URL", "loc_canon"); ?></label><br/>
												<input class='slide_option url' type='text' id='slide_image_url' name='canon_options_slider[slides][<?php echo $i; ?>][image_url]' value='<?php if (isset($canon_options_slider['slides'][$i]['image_url'])) echo $canon_options_slider['slides'][$i]['image_url']; ?>'>
												<input class="upload button upload_button_slider" type="button" id="upload_slides" value="Upload image" />

												<br><br>
												<label><?php _e("Text alignment", "loc_canon"); ?></label><br/>
												<select class='slide_option url' id="slide_text_alignment" name="canon_options_slider[slides][<?php echo $i; ?>][text_alignment]"> 
									     			<option value="left" <?php if (isset($canon_options_slider['slides'][$i]['text_alignment'])) {if ($canon_options_slider['slides'][$i]['text_alignment'] == "left") echo "selected='selected'";} ?>><?php _e("Left", "loc_canon"); ?></option> 
									     			<option value="right" <?php if (isset($canon_options_slider['slides'][$i]['text_alignment'])) {if ($canon_options_slider['slides'][$i]['text_alignment'] == "right") echo "selected='selected'";} ?>><?php _e("Right", "loc_canon"); ?></option> 
												</select> 

												<br/><br>
												<label><?php _e("Text", "loc_canon"); ?></label><br/>
												<textarea class='slide_option' id='slide_text' name='canon_options_slider[slides][<?php echo $i; ?>][text]' rows='8' cols='133'><?php if (isset($canon_options_slider['slides'][$i]['text'])) echo $canon_options_slider['slides'][$i]['text']; ?></textarea>

												<input class="slide_option" type="hidden" id="slide_type" name="canon_options_slider[slides][<?php echo $i; ?>][type]" value="image_slide">
												<input class="slide_option" type="hidden" id="slide_status" name="canon_options_slider[slides][<?php echo $i; ?>][status]" value="<?php if (isset($canon_options_slider['slides'][$i]['status'])) echo $canon_options_slider['slides'][$i]['status']; ?>">

											</div>

										</div>

									</li>
								<!-- IMAGE SLIDE TYPE END-->

								<?php
								}

								if ($canon_options_slider['slides'][$i]['type'] == 'post_slide') {
								?>
									
								<!-- POST SLIDE TYPE -->
									<li class="post_slide slide">
										<div class="slide_head">
											<h3><?php _e("Post slide", "loc_canon"); ?>: <i><?php if (!empty($canon_options_slider['slides'][$i]['title'])){echo $canon_options_slider['slides'][$i]['title'];} else {echo "Untitled";} ?></i></h2>
										</div>

										<div class="slide_content clearfix">

											<div class="slide_thumb">
												<?php 
													if(!empty($canon_options_slider['slides'][$i]['post_id']) && has_post_thumbnail($canon_options_slider['slides'][$i]['post_id'])) {
                                                        $post_thumbnail_src = wp_get_attachment_image_src(get_post_thumbnail_id($canon_options_slider['slides'][$i]['post_id']),'full');
														printf("<img width='200' src='%s'>", esc_url($post_thumbnail_src[0]));															
													} else {
														printf("<img width='200' src='%s'>", esc_url(get_template_directory_uri() . "/img/default_slide_img.png"));	
													}
												?>
											</div>

											<div class="slide_options">
												<label><?php _e("Slide title", "loc_canon"); ?></label> <br>
												<input class='slide_option widefat' type='text' id='slide_title' name='canon_options_slider[slides][<?php echo $i; ?>][title]' value="<?php if (isset($canon_options_slider['slides'][$i]['title'])) echo htmlspecialchars($canon_options_slider['slides'][$i]['title']); ?>">

												<br><br>
												<label><?php _e("Select post", "loc_canon"); ?></label> <br>
												<select class='slide_option' id="slide_post_select" name="canon_options_slider[slides][<?php echo $i; ?>][post_id]"> 
									     			<option>---</option> 
													<?php 
														for ($n = 0; $n < count($results_query); $n++) { 
															if (has_post_thumbnail($results_query[$n]->ID))  {
																$post_thumbnail_src = wp_get_attachment_image_src(get_post_thumbnail_id($results_query[$n]->ID),'full'); 
																$post_thumbnail_src = $post_thumbnail_src[0];	
															} else {
																$post_thumbnail_src = get_template_directory_uri() . "/img/default_slide_img.png";
															}
														?>
											     			<option 
											     				data-image_url = "<?php echo $post_thumbnail_src; ?>"
											     				data-title="<?php echo mb_make_excerpt(esc_attr($results_query[$n]->post_title),110,false); ?>"
											     				data-link="<?php echo get_permalink($results_query[$n]->ID); ?>"
											     				data-content = "<?php echo mb_make_excerpt(esc_attr($results_query[$n]->post_content), 300, true); ?>"
											     				value="<?php echo $results_query[$n]->ID; ?>" 
											     				<?php if (isset($canon_options_slider['slides'][$i]['post_id'])) {if ($canon_options_slider['slides'][$i]['post_id'] == $results_query[$n]->ID) echo "selected='selected'";} ?>
											     			>
											     				<?php echo mb_make_excerpt($results_query[$n]->post_title, 110, false); ?>
											     			</option> 
														<?php
														}

													?>
												</select> 

												<br><br>
												<label><?php _e("Link", "loc_canon"); ?></label> <br>
												<input class='slide_option widefat readonly' type='text' id='slide_link' name='canon_options_slider[slides][<?php echo $i; ?>][link]' value='<?php if (isset($canon_options_slider['slides'][$i]['link'])) echo $canon_options_slider['slides'][$i]['link']; ?>'>

												<br><br>
												<label><?php _e("Text alignment", "loc_canon"); ?></label><br/>
												<select class="slide_option" id="slide_text_alignment" name="canon_options_slider[slides][<?php echo $i; ?>][text_alignment]"> 
									     			<option value="left" <?php if (isset($canon_options_slider['slides'][$i]['text_alignment'])) {if ($canon_options_slider['slides'][$i]['text_alignment'] == "left") echo "selected='selected'";} ?>><?php _e("Left", "loc_canon"); ?></option> 
									     			<option value="right" <?php if (isset($canon_options_slider['slides'][$i]['text_alignment'])) {if ($canon_options_slider['slides'][$i]['text_alignment'] == "right") echo "selected='selected'";} ?>><?php _e("Right", "loc_canon"); ?></option> 
												</select> 

												<br><br>
												<label><?php _e("Text", "loc_canon"); ?></label> <br>
												<textarea class='slide_option' id='slide_text' name='canon_options_slider[slides][<?php echo $i; ?>][text]' rows='8' cols='133'><?php if (isset($canon_options_slider['slides'][$i]['text'])) echo $canon_options_slider['slides'][$i]['text']; ?></textarea>

												<input class="slide_option" type="hidden" id="slide_image_url" name="canon_options_slider[slides][<?php echo $i; ?>][image_url]" value="<?php if (isset($canon_options_slider['slides'][$i]['image_url'])) echo $canon_options_slider['slides'][$i]['image_url']; ?>">
												<input class="slide_option" type="hidden" id="slide_type" name="canon_options_slider[slides][<?php echo $i; ?>][type]" value="post_slide">
												<input class="slide_option" type="hidden" id="slide_status" name="canon_options_slider[slides][<?php echo $i; ?>][status]" value="<?php if (isset($canon_options_slider['slides'][$i]['status'])) echo $canon_options_slider['slides'][$i]['status']; ?>">

											</div>

										</div>
									</li>
								<!-- POST SLIDE TYPE END-->

								<?php
								}

							}
							//end fori

						?>

					</ul>
				</div>
				<!-- END SLIDER MAIN AREA -->

				
			</div>
			<!-- END SLIDER WRAP -->


			<?php //submit_button(); ?>

		</form>



				<!-- 
				SLIDE TEMPLATES
				You can just copy paste the slide types from above.
				-->
				<div id="slide_templates">
					<ul id="slides">

								<!-- IMAGE SLIDE TYPE -->
									<li class="image_slide slide">
										<div class="slide_head">
											<h3><?php _e("Image slide", "loc_canon"); ?>: <i><?php if (!empty($canon_options_slider['slides'][$i]['title'])){echo $canon_options_slider['slides'][$i]['title'];} else {echo "Untitled";} ?></i></h2>
										</div>

										<div class="slide_content clearfix">

											<div class="slide_thumb">
												<?php 
													if(!empty($canon_options_slider['slides'][$i]['image_url'])) {
														printf("<img width='200' src='%s'>", esc_url($canon_options_slider['slides'][$i]['image_url']));															
													} else {
														printf("<img width='200' src='%s'>", esc_url(get_template_directory_uri() . "/img/default_slide_img.png"));	
													}

												?>
											</div>

											<div class="slide_options">
												<label><?php _e("Slide title", "loc_canon"); ?></label><br/>
												<input class='slide_option widefat' type='text' id='slide_title' name='canon_options_slider[slides][<?php echo $i; ?>][title]' value="<?php if (isset($canon_options_slider['slides'][$i]['title'])) echo htmlspecialchars($canon_options_slider['slides'][$i]['title']); ?>">

												<br><br>
												<label><?php _e("Image URL", "loc_canon"); ?></label><br/>
												<input class='slide_option url' type='text' id='slide_image_url' name='canon_options_slider[slides][<?php echo $i; ?>][image_url]' value='<?php if (isset($canon_options_slider['slides'][$i]['image_url'])) echo $canon_options_slider['slides'][$i]['image_url']; ?>'>
												<input class="upload button upload_button" type="button" id="upload_slides" value="Upload image" />

												<br><br>
												<label><?php _e("Text alignment", "loc_canon"); ?></label><br/>
												<select class='slide_option url' id="slide_text_alignment" name="canon_options_slider[slides][<?php echo $i; ?>][text_alignment]"> 
									     			<option value="left" <?php if (isset($canon_options_slider['slides'][$i]['text_alignment'])) {if ($canon_options_slider['slides'][$i]['text_alignment'] == "left") echo "selected='selected'";} ?>>Left</option> 
									     			<option value="right" <?php if (isset($canon_options_slider['slides'][$i]['text_alignment'])) {if ($canon_options_slider['slides'][$i]['text_alignment'] == "right") echo "selected='selected'";} ?>>Right</option> 
												</select> 

												<br/><br>
												<label><?php _e("Text", "loc_canon"); ?></label><br/>
												<textarea class='slide_option' id='slide_text' name='canon_options_slider[slides][<?php echo $i; ?>][text]' rows='8' cols='133'><?php if (isset($canon_options_slider['slides'][$i]['text'])) echo $canon_options_slider['slides'][$i]['text']; ?></textarea>

												<input class="slide_option" type="hidden" id="slide_type" name="canon_options_slider[slides][<?php echo $i; ?>][type]" value="image_slide">
												<input class="slide_option" type="hidden" id="slide_status" name="canon_options_slider[slides][<?php echo $i; ?>][status]" value="<?php if (isset($canon_options_slider['slides'][$i]['status'])) echo $canon_options_slider['slides'][$i]['status']; ?>">

											</div>

										</div>

									</li>
								<!-- IMAGE SLIDE TYPE END-->

								<!-- POST SLIDE TYPE -->
									<li class="post_slide slide">
										<div class="slide_head">
											<h3><?php _e("Post slide", "loc_canon"); ?>: <i><?php if (!empty($canon_options_slider['slides'][$i]['title'])){echo $canon_options_slider['slides'][$i]['title'];} else {echo "Untitled";} ?></i></h2>
										</div>

										<div class="slide_content clearfix">

											<div class="slide_thumb">
												<?php 
													if(!empty($canon_options_slider['slides'][$i]['post_id']) && has_post_thumbnail($canon_options_slider['slides'][$i]['post_id'])) {
                                                        $post_thumbnail_src = wp_get_attachment_image_src(get_post_thumbnail_id($canon_options_slider['slides'][$i]['post_id']),'full');
														printf("<img width='200' src='%s'>", esc_url($post_thumbnail_src[0]));															
													} else {
														printf("<img width='200' src='%s'>", esc_url(get_template_directory_uri() . "/img/default_slide_img.png"));	
													}
												?>
											</div>

											<div class="slide_options">
												<label><?php _e("Slide title", "loc_canon"); ?></label> <br>
												<input class='slide_option widefat' type='text' id='slide_title' name='canon_options_slider[slides][<?php echo $i; ?>][title]' value="<?php if (isset($canon_options_slider['slides'][$i]['title'])) echo htmlspecialchars($canon_options_slider['slides'][$i]['title']); ?>">

												<br><br>
												<label><?php _e("Select post", "loc_canon"); ?></label> <br>
												<select class='slide_option' id="slide_post_select" name="canon_options_slider[slides][<?php echo $i; ?>][post_id]"> 
									     			<option>---</option> 
													<?php 
														for ($n = 0; $n < count($results_query); $n++) { 
															if (has_post_thumbnail($results_query[$n]->ID))  {
																$post_thumbnail_src = wp_get_attachment_image_src(get_post_thumbnail_id($results_query[$n]->ID),'full'); 
																$post_thumbnail_src = $post_thumbnail_src[0];	
															} else {
																$post_thumbnail_src = get_template_directory_uri() . "/img/default_slide_img.png";
															}
														?>
											     			<option 
											     				data-image_url = "<?php echo $post_thumbnail_src; ?>"
											     				data-title="<?php echo mb_make_excerpt(esc_attr($results_query[$n]->post_title),110,false); ?>"
											     				data-link="<?php echo get_permalink($results_query[$n]->ID); ?>"
											     				data-content = "<?php echo mb_make_excerpt(esc_attr($results_query[$n]->post_content), 300, true); ?>"
											     				value="<?php echo $results_query[$n]->ID; ?>" 
											     				<?php if (isset($canon_options_slider['slides'][$i]['post_id'])) {if ($canon_options_slider['slides'][$i]['post_id'] == $results_query[$n]->ID) echo "selected='selected'";} ?>
											     			>
											     				<?php echo mb_make_excerpt($results_query[$n]->post_title, 110, false); ?>
											     			</option> 
														<?php
														}

													?>
												</select> 

												<br><br>
												<label><?php _e("Link", "loc_canon"); ?></label> <br>
												<input class='slide_option widefat readonly' type='text' id='slide_link' name='canon_options_slider[slides][<?php echo $i; ?>][link]' value='<?php if (isset($canon_options_slider['slides'][$i]['link'])) echo $canon_options_slider['slides'][$i]['link']; ?>'>

												<br><br>
												<label><?php _e("Text alignment", "loc_canon"); ?></label><br/>
												<select class="slide_option" id="slide_text_alignment" name="canon_options_slider[slides][<?php echo $i; ?>][text_alignment]"> 
									     			<option value="left" <?php if (isset($canon_options_slider['slides'][$i]['text_alignment'])) {if ($canon_options_slider['slides'][$i]['text_alignment'] == "left") echo "selected='selected'";} ?>><?php _e("Left", "loc_canon"); ?></option> 
									     			<option value="right" <?php if (isset($canon_options_slider['slides'][$i]['text_alignment'])) {if ($canon_options_slider['slides'][$i]['text_alignment'] == "right") echo "selected='selected'";} ?>><?php _e("Right", "loc_canon"); ?></option> 
												</select> 

												<br><br>
												<label><?php _e("Text", "loc_canon"); ?></label> <br>
												<textarea class='slide_option' id='slide_text' name='canon_options_slider[slides][<?php echo $i; ?>][text]' rows='8' cols='133'><?php if (isset($canon_options_slider['slides'][$i]['text'])) echo $canon_options_slider['slides'][$i]['text']; ?></textarea>

												<input class="slide_option" type="hidden" id="slide_image_url" name="canon_options_slider[slides][<?php echo $i; ?>][image_url]" value="<?php if (isset($canon_options_slider['slides'][$i]['image_url'])) echo $canon_options_slider['slides'][$i]['image_url']; ?>">
												<input class="slide_option" type="hidden" id="slide_type" name="canon_options_slider[slides][<?php echo $i; ?>][type]" value="post_slide">
												<input class="slide_option" type="hidden" id="slide_status" name="canon_options_slider[slides][<?php echo $i; ?>][status]" value="<?php if (isset($canon_options_slider['slides'][$i]['status'])) echo $canon_options_slider['slides'][$i]['status']; ?>">

											</div>

										</div>
									</li>
								<!-- POST SLIDE TYPE END-->
 

				</div>
				<!-- END SLIDE TEMPLATES -->
	

	</div>

